<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D卡片螺旋展开+圆圈旋转</title>
        <style>
            body {
                margin: 0;
                background: #000;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                perspective: 1000px;
            }


            .card-container {
                position: relative;
                width: 300px;
                height: 300px;
                transform-style: preserve-3d;
                animation: rotate 15s infinite linear;
                animation-play-state: paused;
            }

            .card-container:hover {
                animation-play-state: paused;
            }

        
            .card {
                position: absolute;
                width: 120px;
                height: 160px;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
                transform-origin: center;
                cursor: pointer;
                transform: translateZ(0);
                transition: transform 0.5s ease-out;
            }

            .card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            /* 倒影效果 */
            .card::after {
                content: "";
                position: absolute;
                bottom: -20px;
                left: 0;
                width: 100%;
                height: 20px;
                background: linear-gradient(to top, rgba(255, 255, 255, 0.3), transparent);
                transform: scaleY(-1) translateY(100%);
                opacity: 0.7;
            }

  
            .card:nth-child(1) {
                background: #ff4757;
            }

            .card:nth-child(2) {
                background: #2ed573;
            }

            .card:nth-child(3) {
                background: #1e90ff;
            }

        
            .card-container.expanded .card:nth-child(1) {
                transform: rotateY(0deg) translateZ(150px);
            }

            .card-container.expanded .card:nth-child(2) {
                transform: rotateY(120deg) translateZ(150px);
            }

            .card-container.expanded .card:nth-child(3) {
                transform: rotateY(240deg) translateZ(150px);
            }

            /* 容器旋转动画 */
            @keyframes rotate {
                0% {
                    transform: rotateY(0);
                }

                100% {
                    transform: rotateY(360deg);
                }
            }
        </style>
    </head>

    <body>
        <div class="card-container" id="container">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>

        <script>
            const container = document.getElementById('container');
            const cards = document.querySelectorAll('.card');

            // 初始不旋转
            container.style.animationPlayState = 'paused';

            // 定义螺旋展开动画
            function spiralCard(card, index) {
                const angle = index * 120; // 120度间隔
                const delay = index * 500; // 每个卡片延迟 0.5s

                // 初始位置（中心）
                card.style.transform = `rotateY(${angle - 30}deg) translateZ(0)`;

                // 延迟后执行螺旋展开
                setTimeout(() => {
                    card.style.transition = 'transform 1s ease-out';
                    card.style.transform = `rotateY(${angle}deg) translateZ(150px)`;
                }, delay);
            }

            // 逐个执行螺旋动画
            cards.forEach((card, index) => {
                spiralCard(card, index);
            });

            // 所有卡片动画完成后，开始整体旋转
            setTimeout(() => {
                container.classList.add('expanded');
                container.style.animationPlayState = 'running'; // 开始旋转
            }, 2000); // 等待所有卡片动画完成

            // 点击任意卡片可切换展开/收回状态
            container.addEventListener('click', () => {
                container.classList.toggle('expanded');
            });
        </script>
    </body>

</html>